<template>
  <a-grid :cols="24" :row-gap="16" class="panel">
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          :title="$t('Calculated Pay')"
          :value="statistics.payslipPay"
          :precision="2"
          :value-from="0"
          animation
          show-group-separator
        >
          <!-- <template #suffix>
            W+ <span class="unit">{{ $t('workplace.pecs') }}</span>
          </template> -->
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          :title="$t('Payslip Pay')"
          :value="statistics.calculatedPay"
          :precision="2"
          :value-from="0"
          animation
          show-group-separator
        >
          <!-- <template #suffix>
            <span class="unit">{{ $t('$') }}</span>
          </template> -->
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          :title="$t('Period Over Payments')"
          :value="statistics.periodOverPayments"
          :precision="2"
          :value-from="0"
          animation
          show-group-separator
        >
          <!-- <template #suffix>
            <span class="unit">{{ $t('$') }}</span>
          </template> -->
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
      style="border-right: none"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          :title="$t('Variance Setoff')"
          :value="statistics.varianceSetoff"
          :precision="2"
          :value-from="0"
          animation
        >
          <!-- <template #suffix> % <icon-caret-up class="up-icon" /> </template> -->
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item :span="24">
      <a-divider class="panel-border" />
    </a-grid-item>
  </a-grid>
</template>

<script lang="ts" setup>
  import { inject, ref, onMounted, watchEffect} from 'vue';
  import axios from 'axios';
  import eventBus from '@/eventBus';
  import baseUrl from '../../../../config';
  
  // 从 content-chart.vue 中获取参数
  // 从父组件中获取数据


  // 父组件传递下来的 props
  const props = defineProps({
      selectedEmployee: String,
      selectedPeriod: String,
      taskId: String,
    });


  const statistics = ref({
    calculatedPay: 0,
    payslipPay: 0,
    periodOverPayments: 0,
    varianceSetoff: 0,
  });

  // 封装接口调用的逻辑
  const fetchStatistics = async (employeeParam = '', taskIdValue = '', period = '' ) => {
    try {
      // 调用接口
      const { data } = await axios.get(
        `${baseUrl}/api/dashboardtop?employee=${employeeParam}&task_id=${taskIdValue}&period=${period}`
      );

      console.log('API 返回数据:', data);
      // 检查确保返回的data包含summary_data数组
      if (data && Array.isArray(data.results) && data.results.length >= 4) {
        // 使用数组解构来提取四个统计数据
        const [calculatedPay, payslipPay, periodOverPayments, varianceSetoff] =
          data.results;
        // 更新statistics的值
        console.log(
          calculatedPay,
          payslipPay,
          periodOverPayments,
          varianceSetoff
        );
        const gap = calculatedPay - payslipPay;

        statistics.value = {
          calculatedPay,
          payslipPay,
          periodOverPayments,
          varianceSetoff: gap,
        };
      } else {
        // 如果数据不符合预期，设置默认值
        console.error('Unexpected response structure or missing data:', data);
        statistics.value = {
          calculatedPay: 0,
          payslipPay: 0,
          periodOverPayments: 0,
          varianceSetoff: 0,
        };
      }
      console.log(statistics);
    } catch (error) {
      console.error('Failed to fetch statistics:', error);
      // 错误时也设置默认值
      statistics.value = {
        calculatedPay: 0,
        payslipPay: 0,
        periodOverPayments: 0,
        varianceSetoff: 0,
      };
    }
  };


  // 添加处理函数
  function handleExecuteQuery({ employee, task, period }) {
    console.log(`Received query from ContentChart with employee: ${employee}, task: ${task}, period: ${period}`);
    fetchStatistics(employee, task, period); // 调用 fetchStatistics 并传递参数
  }
  // 在 onMounted 钩子中添加监听
  onMounted(() => {
    fetchStatistics(); // 初次加载时调用接口
    eventBus.on('execute-query', handleExecuteQuery);
  });

</script>

<style lang="less" scoped>
  .arco-grid.panel {
    margin-bottom: 0;
    padding: 16px 20px 0 20px;
  }
  .panel-col {
    padding-left: 43px;
    border-right: 1px solid rgb(var(--gray-2));
  }
  .col-avatar {
    margin-right: 12px;
    background-color: var(--color-fill-2);
  }
  .up-icon {
    color: rgb(var(--red-6));
  }
  .unit {
    margin-left: 8px;
    color: rgb(var(--gray-8));
    font-size: 12px;
  }
  :deep(.panel-border) {
    margin: 4px 0 0 0;
  }
</style>
